<template>
    <div class="Ficat_li" @click="deleteFn(item.id)">
        <img  v-lazy="item.picture" alt="">
        <p class="Ficat_p">{{ item.name }}</p>
        <p class="Ficat_p2">{{item.desc}}</p>
        <p class="Ficat_p3">￥{{item.price}}</p>
    </div>
</template>

<script>
export default {
    name:'AllClassList',
    props:['item'],
    methods:{
        deleteFn(a){
            console.log(111);
            console.log(a);
            this.$router.push({
                name:'detail',
                params:{id:a}
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .Ficat_li{
        width: 220px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        padding: 20px 30px;
       
        img{
            width: 100px;
            height: 100px;
            // background: green;
            vertical-align: middle;
        }
        .Ficat_p{
            width:160px ;
            font-size: 16px;

            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-top: 10px;
        }
        .Ficat_p2{
            width:160px ;
            font-size: 14px;
            color: #999;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-top: 10px;


        }
        .Ficat_p3{
            font-size: 20px;
            color: #cf4444;
            margin-top: 10px;

        }
    }
    div:hover{
            animation: aa .3s linear 0s 1 normal forwards;
        }
        @keyframes aa {
            0%{
               
            }
            100%{
                box-shadow: 0px 0px 5px #888;
                transform: perspective(800px) translatez(20px);
            }
        }
</style>